<!--TeachersList.html-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en" th:fragment="content">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" crossorigin="anonymous">
  <title>教师列表</title>
  <style>
    body {
      display: flex;
      flex-direction: column;
      height: 100vh;
      margin: 0;
      padding: 0;
    }
    .main-container {
      display: flex;
      flex: 1;
    }
    aside {
      width: 190px; /* 左侧菜单宽度 */
      background-color: #171d1d;
    }
    .right-container {
      flex: 1;
      display: flex;
      flex-direction: column;/*除左侧菜单外，整个右半部分以垂直的形式布局*/
      background-color: white;
    }
    header {
      min-height: 60px; /* 头部高度 */
      text-align: center;
      padding: 10px;
      margin-bottom: 25px;
      box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }
    .content {
      flex: 1;
      padding: 10px;
      overflow-y: auto; /* 主内容区域滚动 */
    }
    footer {
      background-color: #6e7272;
      color: white;
      height: 60px; /* 页脚高度 */
      text-align: center;
      padding: 10px;
      margin-top: 15px;
    }
    .content-card {
      background-color: white;
      box-shadow: 0 5px 10px rgba(0,0,0,0.1);
      padding: 15px;
      margin-bottom: 15px; /* 调整与表格的间距 */
    }
    .table {
      box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }
    .table a:hover {
      text-decoration: none;
    }
  </style>
</head>
<body>
<div class="main-container">

  <aside th:replace="~{/layout/left_menu.html}"></aside>

  <div class="right-container">

    <header th:replace="~{/layout/header.html}"></header>

    <div class="content">
      <div class="content-card">
        <button type="button" id="addTeacherButton" class="btn btn-primary" onclick="addTeacher()">
          <i class="bi bi-plus-circle"></i>新增教师
        </button>
      </div>
      <table class="table table-striped">
        <thead>
        <tr>
          <th scope="col">id</th>
          <th scope="col">username</th>
          <th scope="col">password</th>
          <th scope="col">性别</th>
          <th scope="col">生日</th>
          <th scope="col">课程</th>
          <th scope="col">专业</th>
          <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="teacher:${teachers}">
          <td th:text="${teacher.id}"></td>
          <td th:text="${teacher.name}"></td>
          <td th:text="${teacher.password}"></td>
          <td th:text="${teacher.sex==1?'男':'女'}"></td>
          <td th:text="${teacher.birthday}"></td>
          <td th:text="${teacher.course.name}"></td>
          <td th:text="${teacher.professional}"></td>
          <th>
            <a th:href="@{/Teacher/toEdit(id=${teacher.id})}">修改</a>
            <a th:href="@{/Teacher/remove(id=${teacher.id})}">删除</a>
          </th>
        </tr>
        </tbody>
      </table>
      <nav aria-label="Page navigation example">
        <ul class="pagination">
          <li class="page-item">
            <a class="page-link" th:href="@{/Teacher/list/{currentPage}/3(currentPage = (${currentPage} ?: 1) - 1)}">上一页</a>
          </li>
          <li class="page-item"><a class="page-link" th:href="@{/Teacher/list/1/3}">1</a></li>
          <li class="page-item"><a class="page-link" th:href="@{/Teacher/list/2/3}">2</a></li>
          <li class="page-item"><a class="page-link" th:href="@{/Teacher/list/3/3}">3</a></li>
          <li class="page-item">
            <a class="page-link" href="#" th:href="@{/Teacher/list/{currentPage}/3(currentPage = ${currentPage}+1)}">下一页</a>
          </li>
        </ul>
      </nav>
    </div>

    <footer th:replace="~{/layout/footer.html}"></footer>
  </div>
</div>
<script>
  function addTeacher() {
    window.location.href = "/Teacher/toAdd";
  }
</script>
</body>
</html>